<template>
  <div>
    <el-table
        :data="articlesList"
        style="width: 100%"
    >
        <el-table-column
            label="序号"
            width="80px"
        >
          <template #default="{ $index }">
            <span>{{ $index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
            label="文章标题"
            width="400px"
            prop="title"
        >
          <template #default="{ row }">
            <span>{{ row.title }}</span>
            <a href="#" class="el-icon-film video" v-if="row.videoURL" @click="hVideo(row.videoURL)"></a>
          </template>
        </el-table-column>
        <el-table-column
            label="阅读数"
            prop="visits"
        >
        </el-table-column>
        <el-table-column
            label="录入人"
            prop="username"
        >
        </el-table-column>
        <el-table-column
            label="录入时间"
            prop="createTime"
        >
        </el-table-column>
        <el-table-column
            label="状态"
            width="100px"
            prop="state"
        >
          <template #default="{ row }">
            <div>{{ row.state === 0 ? '已启用' : '已禁用' }}</div>
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="180px"
        >
          <template #default="{ row }">
            <el-button class="operate-button" @click="previewArticle(row)">预览</el-button>
            <el-button class="operate-button" @click="toggle(row)" v-text="row.state === 0 ? '禁用' :'启用' "></el-button>
            <el-button type="text" :disabled="row.state === 1" @click="update(row.id)">修改</el-button>
            <el-button type="text" :disabled="row.state === 1" @click="del(row)">删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- 预览框 -->
    <el-dialog
      title="预览文章"
      :visible.sync="preview"
      width="55%"
      :before-close="hClose"
    >
      <div class="title">
        <div class="topic">{{ detailList.title }}</div>
        <div class="detailMessage">
          <span class="message">{{ detailList.createTime }}</span>
          <span class="message">{{ username }}</span>
          <span class="message el-icon-view"></span>
          <span class="message">{{ detailList.visits }}</span>
        </div>
      </div>
      <div class="content" v-html="detailList.articleBody"></div>
    </el-dialog>
    <!-- 编辑框 -->
    <articles-add
      :isArticles.sync="isArticles"
      :curId="curId"
      :formData="formData"
      @getArticleList="getArticleList"
    ></articles-add>
    <!-- 视频 -->
    <div class="video-preview" v-if="videoShow">
      <div class="close" @click="hCloseVideo">
        <div class="el-icon-close"></div>
      </div>
      <div class="box">
        <video controls>
            <source :src="videoURL" type="video/mp4">
        </video>
      </div>
    </div>
  </div>
</template>

<script>
import { detail, changeState, remove } from '@/api/hmmm/articles'
import ArticlesAdd from '../../components/articles-add.vue'
export default {
  components: {
    ArticlesAdd
  },
  props: {
    articlesList: {
      type: Array,
      required: true
    },
    pageQuery: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      videoURL: '',
      videoShow: false,
      formData: {},
      curId: 0,
      isArticles: false,
      username: '', // 用户名
      detailList: {},
      preview: false
    }
  },
  methods: {
    // 关闭
    hCloseVideo () {
      this.videoShow = false
    },
    // 打开视频
    hVideo (url) {
      this.videoShow = true
      this.videoURL = url
    },
    // 更新页面
    getArticleList () {
      this.$emit('getArticleList')
    },
    // 修改文章
    async update (id) {
      this.isArticles = true
      this.curId = id
      const res = await detail({ id: id })
      this.formData = res.data
    },
    // 删除文章
    del (row) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = { id: row.id }
        await remove(data)
        if (this.articlesList.length === 1 && this.pageQuery.page > 1) {
          this.$emit('updatePage')
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 完成删除调用父组件内的方法重新获取列表
        this.$emit('update')
      }).catch(() => {
      })
    },
    // 切换 (禁用/启用) 状态
    async toggle (row) {
      if (row.state === 1) {
        row.state = 0
      } else {
        row.state = 1
      }
      const toggleState = { id: row.id, state: row.state }
      await changeState(toggleState)
      this.$message.success('操作成功')
    },
    // 预览
    async previewArticle ({ id, username }) {
      const data = { id: id }
      this.preview = true
      const res = await detail(data)
      this.detailList = res.data
      this.username = username
      // 修改时间格式
      if (this.detailList.createTime) {
        // 创建一个日期对象
        const dateObj = new Date(this.detailList.createTime)

        // 获取年、月、日、小时、分钟、秒
        const year = dateObj.getFullYear()
        const month = ('0' + (dateObj.getMonth() + 1)).slice(-2)
        const day = ('0' + dateObj.getDate()).slice(-2)
        const hours = ('0' + dateObj.getHours()).slice(-2)
        const minutes = ('0' + dateObj.getMinutes()).slice(-2)
        const seconds = ('0' + dateObj.getSeconds()).slice(-2)

        // 拼接成目标格式的字符串

        this.detailList.createTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
      }
    },
    // 关闭预览
    hClose (done) {
      done()
    }
  }
}
</script>

<style scoped lang="scss">
.operate-button {
  width: 30px;
  height: 36px;
  padding: 10px 0;
  border-color: transparent;
  background-color: transparent;
  font-size: 14px;
  color: #409eff;
}
.video{
  margin-left: 5px;
  color: #0000ff;
}
.title{
  border-bottom: 1px dashed #ccc;
  padding-bottom: 10px;
  .topic{
    font-size: 21px;
  }
  .detailMessage{
    margin-top: 5px;
    .message{
      margin-left: 10px;
    }
  }
}
.content{
  background: #f5f5f5;
  padding: 10px;
}
.video-preview{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.3);
  overflow: hidden;
  z-index: 9999;
  .close{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%);
    background: rgba(0,0,0,.4);
    box-shadow: 0 0 5px rgba(0,0,0,.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .box{
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    video{
      width: 100%;
      height: 100%;
    }
  }
}
</style>
